<template>
  <a-modal width="60%" v-model:visible="visible" @before-ok="onOk" unmount-on-close>
    <template #title>
      <div class="w-full">
        <span class="font-bold">{{ title }}</span>
      </div>
    </template>
    <a-radio-group v-model="type">
      <a-radio :value="1"
        >官方源头群<span v-if="officialGroupList"
          >（{{ officialGroupList?.length }}）</span
        ></a-radio
      >
      <a-radio :value="2" v-if="personalGroupList"
        >我的群（{{ personalGroupList?.length }}）</a-radio
      >
    </a-radio-group>
    <section class="h-100n w-full overflow-hidden">
      <transition name="fade-slide" mode="out-in" appear>
        <keep-alive>
          <component
            ref="componentRef"
            :is="menuList[type - 1]"
            :currentGroup="currentGroup"
            :disabledGroup="disabledGroup"
            :officialGroupList="officialGroupList"
            :personalGroupList="personalGroupList"
            @handleSource="handleSource"
          ></component>
        </keep-alive>
      </transition>
    </section>
  </a-modal>
</template>

<script setup>
import { Message } from '@arco-design/web-vue'
import OfficialGroup from './officialGroup.vue'
import PersonalGroup from './personalGroup.vue'
import $bus from '@renderer/common/js/bus'
const props = defineProps(['officialGroupList', 'personalGroupList'])
const emit = defineEmits(['handleSourceSuccess'])
const menuList = [OfficialGroup, PersonalGroup]
const title = ref('跟发源头群')
const visible = ref(false)
const groupResult = ref()
const type = ref(1)
const currentGroup = ref()
const componentRef = ref()
const disabledGroup = ref([])

// 打开编辑框并回显表单值
const chooseSource = async (item) => {
  title.value = `【${item.nickname}】请设置要跟发的源头群（单选）`
  currentGroup.value = item
  if (item.fllowSetting) {
    type.value = item.fllowSetting.type
  } else {
    type.value = 1
  }
  visible.value = true
  nextTick(() => {
    setTimeout(() => {
      componentRef.value?.handleEcho(item.fllowSetting)
    }, 100)
  })
  const fllowSetting = await window.ipcRenderer.invoke('storeGet', 'fllowSetting')
  const arr = []
  if (fllowSetting) {
    for (const key in fllowSetting) {
      if (fllowSetting[key].wxid === item.wxid) {
        arr.push(key)
      }
    }
  }
  disabledGroup.value = arr
}

// 通知父组件选择的群
const handleSource = (result) => {
  if (type.value == 1) {
    $bus.emit('clearChoose2')
    groupResult.value = {
      type: type.value,
      Id: result?.id,
      wxid: result?.groupNo,
      nickname: result?.name,
      avatar: result?.pic
    }
  } else {
    $bus.emit('clearChoose1')
    groupResult.value = {
      type: type.value,
      wxid: result?.wxid,
      nickname: result?.nickname,
      avatar: result?.avatar,
      Member: result?.compere
    }
  }
}

// 点击确认添加/编辑
const onOk = async () => {
  if (!groupResult.value) {
    Message.warning('请选择要跟发的群')
    return false
  }
  emit('handleSourceSuccess', groupResult.value)
  return true
}

defineExpose({ chooseSource })
</script>
